<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;

        }

        body {
            background: #F1F1F1;
        }

        .login {
            border: 1px solid #C4C4C4;
            background: #FBFBFB;
            width: 500px;
            height: 350px;
            margin-top: 300px;
            margin-right: 100px;
            overflow: hidden;
            float: right;

        }

        .left {
            clear: both;
            border: 1px solid blue;
            float: left;
            width: 500px;

        }

        .login .button {
            display: block;
            width: 320px;
            margin-left: 5px;
            height: 42px;
            line-height: 42px;
            color: black;
            font-size: 16px;
            font-weight: bold;

            background-color: #6FD7D6;
        }

        .login .login_input input {
            padding-left: 10px;
            margin-left: 10px;
            margin-bottom: 10px;
            width: 300px;
            height: 40px;
            line-height: 40px;
            /* margin-left: 38px; */
            font-size: 14px;
        }

        .disf {
            width: 80px;
            height: 80px;
            float: left;
            margin-left: 10px;
            border: 1px solid yellow;
        }

        .neirong {
            border: 1px solid red;
            margin-left: 80px;
           /* margin: 0 auto;*/
        }

        h5.title {
            color: #F2AE11;
            font-size: 1.3em;
            margin-bottom: 3em;
            text-align: center;
            font-weight: 500;
            line-height: 1.1;
        }

        h5.title span {
            display: block; /*设置为块级元素会独占一行形成上下居中的效果*/
            font-size: 3em;
            color: #212121;
            position: relative; /*定位横线（当横线的父元素）*/
        }

        h5.title span:before, h3.title span:after {
            content: ''; /*CSS伪类用法*/
            position: absolute; /*定位背景横线的位置*/
            top: 52%;
            background: #494949; /*宽和高做出来的背景横线*/
            width: 9%;
            height: 2px;
        }

        h5.title span:before {
            left: 25%; /*调整背景横线的左右距离*/
        }

        h5.title span:after {
            right: 25%;
        }

        #div1 {
            width: 87px;
            height: 0px;
            border: #999 1px solid;
            float: left;
        }

        #div2 {
            width: 87px;
            height: 0px;
            border: #999 1px solid;
            float: left;
        }

        #div3 {
            float: left;
            height: 5px;
            line-height: 5px;
            margin: 0px 10px;
        }

    </style>
</head>
<body>


<div class="left">
</div>
<div class="login">
    <div class="neirong">
        <span style="font-weight: bold;"> 帐号登录</span>
        <span style="font-weight: bold;"> 通用代码登录</span>
        <div class="login_input">
            <input type="text" placeholder="手机号/帐号" name="">
            <input type="password" placeholder="密码" name="">
        </div>
        <div class="congxin">
            <input type="checkbox" name=""><span>记住密码</span>
            <span class="wjmi">忘记密码?</span>
        </div>
        <input class="button" type="submit" value="登录"></input>
        </br>
        <div id="odiv">
            <div id="div1"></div>
            <div id="div3">第三方帐号登录</div>
            <div id="div2"></div>
        </div>
        <br>
        <div class="disf">
            <img src="" src="./afs.jpg" style="border-radius: 50%"></img>
            <span>qq</span>
        </div>
        <div class="disf">
            <img src="./afs.jpg" style="border-radius: 50%"></img>
            <span>维信</span>
        </div>
           <div class="disf">
                <img src=""  src="./afs.jpg" style="border-radius: 50%"></img>
               <span>微博</span>
          </div> 
    </div>
</div>
</body>
</html>